<template>
    <div>
        <div class="searchHeader">
            <el-input placeholder="根据文章标题搜索" size="small" v-model="titleKeyWords" class="cateKeyWords"></el-input>
            <el-button type="primary" icon="el-icon-search" size="small" @click="searchArticle">搜索文章</el-button>
        </div>

        <div>
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="全部文章" name="first">
                    <ArticleShow ref="artShow1" :edit="false" :deletes="false" :huifu="false" status="0"></ArticleShow>
                </el-tab-pane>
                <el-tab-pane label="已发布" name="second">
                    <ArticleShow ref="artShow2" :edit="true" :deletes="true" :huifu="false" status="1"></ArticleShow>
                </el-tab-pane>
                <el-tab-pane label="回收站" name="third">
                    <ArticleShow ref="artShow3" :edit="false" :deletes="true" :huifu="true" status="2"></ArticleShow>
                </el-tab-pane>
                <el-tab-pane label="草稿箱" name="fourth">
                    <ArticleShow ref="artShow4" :edit="true" :deletes="true" :huifu="false" status="3"></ArticleShow>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import ArticleShow from "./list/ArticleShow";
    export default {
        name: "ArticleList",
        data(){
            return{
                titleKeyWords:'',
                activeName:'first'
            }
        },
        components:{
            ArticleShow
        },
        methods:{
            searchArticle(){
                if(this.activeName=='first'){
                    this.$refs['artShow1'].initArticlesKeyWords(this.titleKeyWords);
                }else if(this.activeName=='second'){
                    this.$refs['artShow2'].initArticlesKeyWords(this.titleKeyWords);
                }else if(this.activeName=='third'){
                    this.$refs['artShow3'].initArticlesKeyWords(this.titleKeyWords);
                }else{
                    this.$refs['artShow4'].initArticlesKeyWords(this.titleKeyWords);
                }
            }
        }
    }
</script>

<style scoped>
    .searchHeader{
        margin: 15px 0;
    }

    .cateKeyWords{
        width: 300px;
        margin-right: 10px;
    }
</style>